// 让便签可被拖动，但不能超出视口


var moveBar = document.querySelector('.border-progress')
var drag = document.querySelector('.drag')
var dragXtext =document.querySelector('.drag-client-x span')
var dragYtext =document.querySelector('.drag-client-y span')
var dragXtextEnd =document.querySelector('.drag-client-x-end span')
var dragYtextEnd =document.querySelector('.drag-client-y-end span')
var barXtext =document.querySelector('.bar-client-x span')
var barYtext =document.querySelector('.bar-client-y span')
console.dir(dragXtext.textContent = 2121)
// barXtext.textContent ='213221'
moveBar.onmousedown = function(e){
  //鼠标按下
  console.log('鼠标按下坐标')
  console.log(e)
  console.log('鼠标按下')
  var barRect = moveBar.getBoundingClientRect()
  var x = e.clientX;
  var y = e.clientY;
  console.log(barRect)
  var startX= barRect.x
  var startY= barRect.y
  barXtext.textContent = x
  barYtext.textContent = y
  dragXtext.textContent = dragXtext.getBoundingClientRect().clientX
  dragYtext.textContent = dragXtext.getBoundingClientRect().clientY

// 获取视口宽高
var w = document.documentElement.clientWidth,
    h =document.documentElement.clientHeight;


var ew = drag.offsetWidth,
    eh = drag.offsetHeight;


    // 算出最大left和top
    var marLeft = w - ew,
        marTop = h - eh;



//


  window.onmousemove = function(e){
    console.log('鼠标移动,left多少,top多少')
    var disX = e.clientX - x,
        disY = e.clientY - y;
    var left = disX + startX,
        top = disY + startY;
       
    console.log(e)
    
    console.log(left)
    console.log(marLeft)
    if(left < 0 ){
      left = 0
    }
    if(left > marLeft ){
      left = marLeft
    }
    if(top < 0){
      top = 0
    }
    if(top > marTop){
      top = marTop
    }
    console.log(left)
    drag.style.left = left + 'px'   
    drag.style.top = top + 'px'
    // console.log(marLeft)
    dragXtextEnd.textContent = drag.clientX
    dragYtextEnd.textContent = drag.clientX

    
    // var barRect = moveBar.getBoundingClientRect()
    // console.log(barRect)
  }
  moveBar.onmouseup = function(){
    //鼠标抬起
    console.log('鼠标抬起,不再监听移动')
    window.onmousemove = null
    moveBar.onmouseup = null

  }
}

